{% extends 'public/layout.html' %}

{% block load_css %}
    <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
{% endblock %}

{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-10">
            <h2></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">仪表盘</a>
                </li>

                <li>
                    <a>监控中心</a>
                </li>


                <li class="active">
                    <strong>监控图表</strong>
                </li>

            </ol>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
{% endblock %}

{% block body %}

<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <form id="asset_form">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>图表展示</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>


                    <div class="ibox-content" style="overflow:scroll;white-space : nowrap">

                            <input name="id" value="{{id}}" type="hidden">
                    </br>
                    <div class="hr-line-dashed"></div>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <style type="text/css">
                        {% for ec in ecslist %}
                            .{{ec.0|safe}}{float: left;}
                        {% endfor %}
                    </style>

                    {% for ec in ecslist %}
                        <div id="{{ec.0}}" class="{{ec.0}}" style="width:33%;height:350px;"></div>
                    {% endfor %}
                        <div id="disk" style="width:100%;height:350px;"></div>


                    <script src="https://lib.baomitu.com/echarts/4.9.0-rc.1/echarts-en.common.min.js"></script>
                    <!--<script src="/static/js/echarts.min.js"></script>-->
                    {% for ec in ecslist %}
                    <script type="text/javascript">
                        // 基于准备好的dom，初始化echarts实例
                        var link = echarts.init(document.getElementById('{{ec.0}}'));

                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '{{ec.0}}(G)',
                                left: 'left',
                                textStyle: {
                                   fontSize:14,
                                },
                            },
                            color:['red','Green'],
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} </br>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: 'horizontal',
                                right: "20%",
                                height: "auto",
                                itemWidth: 15,             // 图例图形宽度
                                itemHeight: 15,            // 图例图形高度
                                data: ["{{ec.1|safe}}","{{ec.2|safe}}"]
                            },
                            xAxis: {
                                data: ["{{ec.1}}", "{{ec.2}}"],
                                type: 'category',
                                axisLabel: {
                                    interval: 0
                                },
                                "show":false
                            },
                            yAxis: {
                                "show":false,
                            },
                            grid: {
                                top: '120%',
                                left: '3%',
                                right: '4%',
                                bottom: '12%',
                                containLabel: true
                            },
                            series: [{
                                name: '{{ec.0}}',
                                type: 'pie',
                                //radius: ['50%','60%'],
                                data: [
                                        {value:"{{ ec.3|safe }}", name: '{{ec.1}}'},
                                        { value:"{{ ec.4|safe }}", name: '{{ec.2}}'}
                                       ]
                            }]
                        }

                        // 使用刚指定的配置项和数据显示图表。
                        link.setOption(option);
                    </script>
                    {% endfor %}

                </div>
                </div>
            </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block load_js %}
    <script src="/static/js/plugins/flot/jquery.flot.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>

    <script>
        $(document).ready(function () {
            var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000,
                26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004],
                [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
            var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000,
                11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000],
                [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

            var data1 = [
                {label: "Data 1", data: d1, color: '#17a084'},
                {label: "Data 2", data: d2, color: '#127e68'}
            ];
            $.plot($("#flot-chart1"), data1, {
                xaxis: {
                    tickDecimals: 0
                },
                series: {
                    lines: {
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 1
                            }, {
                                opacity: 1
                            }]
                        }
                    },
                    points: {
                        width: 0.1,
                        show: false
                    }
                },
                grid: {
                    show: false,
                    borderWidth: 0
                },
                legend: {
                    show: false
                }
            })
        });

    function timeslice(value) {
            var slice = value.options[value.selectedIndex].value;
                if (slice == ""){
                    return false;
                }
                //window.alert(slice);
                var url = "{% url 'chart_detail' %}?id={{id}}&slice={0}".format(slice);
                this.location.href=url;
            };

    function change_info(){
        var args = $("#asset_form").serialize();
        window.location = "{% url 'chart_detail' %}?" + args
    }

    </script>



{% endblock %}